import React, { useState, useEffect } from 'react'
import { ArrowLeft } from '@react-vant/icons'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
export default function Hall() {
  const navigate = useNavigate()
  const [grab, setGrab] = useState([])
  const [page, setPage] = useState(1)
  const [total, setTotal] = useState(0)
  const limit = 1
  /* eslint-disable react-hooks/exhaustive-deps */
  useEffect(() => {
    getgrab()
  }, [])
  /* eslint-disable react-hooks/exhaustive-deps */

  const getgrab = async () => {
    let { data: { data, code, total } } = await axios.get('/getgrab', { params: { page, limit } })
    if (code === 200) {
      setGrab(data)
      setTotal(total)
    }
  }
  const getpage = () => {
    if (total === page) {
      setPage(1)
    } else {
      setPage(page+1);
    }
    getgrab();
  };

  return (
    <div style={{ backgroundColor: '#F2F2F2', width: '100vw', height: '100vh' }}>
      <p style={{ backgroundColor: 'white', padding: '7px', width: '100%', lineHeight: '40px', display: 'flex', alignItems: 'center', fontSize: '23px', borderBottom: '1px solid #CECECE' }}> <ArrowLeft onClick={() => { navigate("/home") }} />抢单大厅</p>
      <div style={{ width: '95%', margin: '10px auto', height: '500px', boxShadow: '0 0 10px #cecece', backgroundColor: 'white' }}>
        {
          grab.map(i => {
            return <div key={i._id} style={{ position: 'relative', height: '80vh' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px', borderBottom: '1px solid #CECECE' }}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                  <img src="./11.png" alt="" style={{ width: '60px' }} />
                  <span style={{ marginLeft: '10px' }}>{i.name}</span>
                  <span style={{ marginLeft: '10px' }}>{i.sex}</span>
                  <span style={{ marginLeft: '10px' }}>{i.age}</span>
                </div>
                <div>
                  <span>5分钟前</span>
                </div>
              </div>
              <div>
                <span>内科-心血管内科</span>
                <button style={{ margin: '20px', padding: '5px 10px', backgroundColor: '#EDF0FD', color: 'blac', border: 'none', borderRadius: '5px' }}>{i.free ? '极速问诊' : '免费义诊'}</button>
                <br />
                <p>病情描述：{i.content}</p>
              </div>
              <div style={{ display: 'flex', width: '100%', justifyContent: 'space-around', alignItems: 'center', position: 'absolute', bottom: '0px', background: 'white' }}>
                <p
                  style={{
                    cursor: 'pointer',
                    padding: '10px'
                  }}
                >重新分科</p>
                <button style={{
                  width: '100px',
                  height: '100px',
                  border: 0,
                  backgroundColor: '#009DD9',
                  color: 'white',
                  borderRadius: '50%',
                  boxShadow: '0 0 10px #cecece',
                  cursor: 'pointer'
                }}>抢单</button>
                <p
                  style={{
                    cursor: 'pointer',
                    padding: '10px'
                  }}
                  onClick={() => { getpage() }}
                >下一单</p>
              </div>
            </div>
          })
        }
      </div>
    </div>
  )
}
